

/* 
清除浮动：.clearfix
显示元素：.block
隐藏元素：.hide

布局：
    　　内联元素、左浮动：.fl
    　　内联元素、右浮动：.fr
    　　左侧不浮动：.cl
    　　右侧不浮动：.cr
    　　左右侧不浮动：.cb
    定位：position
    　　相对定位：.rel
    　　绝对定位：.abs
        sticky顶部：sticky-t
        sticky顶部：sticky-b
    水平对齐：text-align
    　　居左：.tal
    　　居中：.tac
    　　居右：.tar
    内联块：.dib

Flex布局：.flex
    	felx1   .flex1
    　　水平居中：.h-center
    　　垂直居中：.v-center
    　　水平垂直居中：.content-center
    　　
        子元素竖向排列  .flex-column
        子元素不换行排列 .flex-nowrap
        子元素换行排列   .flex-wrap
        子元素两边排列  .flex-jsb
        子元素两边排列(space-between) 并居中   .flex-jsbac
        子元素两边排列( space-around) 并居中   .flex-jsaac
        子元素尾部排列  .flex-jf
        .gap5 gap10 gap15 gap20

宽度：
    100%宽度：.w100
    100%高度：.h100
边距：
    外边距：.m5 .m8 .m10 .m15 .m16 .m20 .m24 .m32
            对应有 mt5 mr5 mb5 ml5 m5
    内边距：.p5 .p8 .p10  .p16 .p20 .p24
            对应有 pt5 pr5 pb5 pl5 p5

文字类
    下划线 .textde
    删除线 .textli
    文字加粗 .fw7
    文字不加粗 .fw5
    文字大小 .fz12 .fz14 .fz16 .fz18 .fz20 .fz22 .fz24 .fz26 .fz30
    文字颜色 .c888 .c086 .cf00 .ce74 .c262
    背景色 .bgcfff
    强行一行超过...  .toe
    首行缩进2em      .ti2

其他
    隐藏滚动条  .overhide
    显示滚动条  .overauto
    层级999     .zi999
    查看模式    .readonly
    鼠标抓手    .cp
*/

/* // 基础类 ------------------------------------------- */
*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

li {
    list-style: none;
}

/* button + button {
    margin-left: 12px;
} */
/* 去除outline 增加 cursor*/
a:focus,
a:active {
    outline: none;
}

a,
a:focus,
a:hover {
    cursor: pointer;
    color: inherit;
    text-decoration: none;
}

div:focus {
    outline: none;
}

input,
button,
select {
    outline: none;
    background: #ffffff;
}

input,
button,
select,
a {
    cursor: pointer;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    font-size: 0;
}

image {
    vertical-align: middle;
    display: block;
}

.block {
    display: block;
}

.dib {
    display: inline-block;
}

.hide {
    display: none !important;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.cl {
    clear: left;
}

.cr {
    clear: right;
}

.cb {
    clear: both;
}

.rel {
    position: relative;
}

.abs {
    position: absolute;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

.sticky-t {
    position: sticky !important;
    top: 0;
    z-index: 9;
}

.sticky-b {
    position: sticky !important;
    bottom: 0;
}

/* // flex 布局相关 通用原子类 -----------------------------------*/
.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.flex-nowrap {
    /* 子元素不换行排列 */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.flex-wrap {
    /* 子元素换行排列 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-w {
    display: flex;
    flex-wrap: wrap;
}

.flex-ac {
    display: flex;
    align-items: center;
    /* 垂直方向居中 */
}

.flex-jcac {
    /* felx-ja 垂直方向居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-jsb {
    /* flex-sb 子元素两边排列 */
    display: flex;
    justify-content: space-between;
}

.flex-jsbac {
    /* flex-sb 子元素两边排列 并居中 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-jsaac {
    /* flex-sb 子元素两边排列 并居中 */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-column {
    /* z子元素竖向排列 */
    display: flex;
    flex-direction: column;
}


.h-center {
    display: flex;
    justify-content: center;
}

.v-center {
    display: flex;
    align-items: center;
}

.content-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gap10 {
    /* display: flex;
    flex-wrap: wrap;
    align-content: baseline; */
    gap: 10px !important;
}

.gap5 {
    gap: 5px !important;
}

.gap15 {
    gap: 15px !important;
}

.gap20 {
    gap: 20px !important;
}

/* // 边距通用原子类 */
/* margin 5px series */

/* padding 5px series */
.pt5 {
    padding-top: 5px;
}

.pr5 {
    padding-right: 5px;
}

.pb5 {
    padding-bottom: 5px;
}

.pl5 {
    padding-left: 5px;
}

.p5 {
    padding: 5px;
}

/* padding 8px series */
.pt8 {
    padding-top: 8px;
}

.pr8 {
    padding-right: 8px;
}

.pb8 {
    padding-bottom: 8px;
}

.pl8 {
    padding-left: 8px;
}

.p8 {
    padding: 8px;
}

/* padding 10px series */
.pt10 {
    padding-top: 10px;
}

.pr10 {
    padding-right: 10px;
}

.pb10 {
    padding-bottom: 10px;
}

.pl10 {
    padding-left: 10px;
}

.p10 {
    padding: 10px;
}

/* padding 16px series */
.pt16 {
    padding-top: 16px;
}

.pr16 {
    padding-right: 16px;
}

.pb16 {
    padding-bottom: 16px;
}

.pl16 {
    padding-left: 16px;
}

.p16 {
    padding: 168px;
}

/* padding 20px series */
.pt20 {
    padding-top: 20px;
}

.pr20 {
    padding-right: 20px;
}

.pb20 {
    padding-bottom: 20px;
}

.pl20 {
    padding-left: 20px;
}

.p20 {
    padding: 20px;
}

/* padding 24px series */
.pt24 {
    padding-top: 24px;
}

.pr24 {
    padding-right: 24px;
}

.pb24 {
    padding-bottom: 24px;
}

.pl24 {
    padding-left: 24px;
}

.p24 {
    padding: 24px;
}

/* margin 5px series */
.mt5 {
    margin-top: 5px;
}

.mr5 {
    margin-right: 5px;
}

.mb5 {
    margin-bottom: 5px;
}

.ml5 {
    margin-left: 5px;
}

.m5 {
    margin: 5px;
}

/* margin 8px series */
.mt8 {
    margin-top: 8px;
}

.mr8 {
    margin-right: 8px;
}

.mb8 {
    margin-bottom: 8px;
}

.ml8 {
    margin-left: 8px;
}

.m8 {
    margin: 8px;
}

/* margin 10px series */
.mt10 {
    margin-top: 10px;
}

.mr10 {
    margin-right: 10px;
}

.mb10 {
    margin-bottom: 10px;
}

.ml10 {
    margin-left: 10px;
}

.m10 {
    margin: 10px;
}

/* margin 15px series */
.mt15 {
    margin-top: 15px;
}

.mr15 {
    margin-right: 15px;
}

.mb15 {
    margin-bottom: 15px;
}

.ml15 {
    margin-left: 15px;
}

.ml15 {
    margin-left: 15px;
}

/* margin 16px series */
.mt16 {
    margin-top: 16px;
}

.mr16 {
    margin-right: 16px;
}

.mb16 {
    margin-bottom: 16px;
}

.ml16 {
    margin-left: 16px;
}

.m16 {
    margin: 16px;
}

/* margin 20px series */
.mt20 {
    margin-top: 20px;
}

.mr20 {
    margin-right: 20px;
}

.mb20 {
    margin-bottom: 20px;
}

.ml20 {
    margin-left: 20px;
}

.m20 {
    margin: 20px;
}

.mt0 {
    margin-top: 0 !important;
}

.mb0 {
    margin-bottom: 0 !important;
}

/* margin 24px series */
.mt24 {
    margin-top: 24px;
}

.mr24 {
    margin-right: 24px;
}

.mb24 {
    margin-bottom: 24px;
}

.ml24 {
    margin-left: 24px;
}

.m24 {
    margin: 24px;
}

/* margin 32px series */
.mt32 {
    margin-top: 32px;
}

.mr24 {
    margin-right: 32px;
}

.mb32 {
    margin-bottom: 32px;
}

.ml32 {
    margin-left: 32px;
}

.m32 {
    margin: 32px;
}

/* // ---------颜色 字体--------------------------------------------------- */

.textde {
    /* 有下划线 */
    text-decoration: underline;
}

.textli {
    text-decoration: line-through;
    /* 删除线 */
}

.fw5 {
    font-weight: 500;
}

.fw7 {
    font-weight: 700;
}


.nowrap {
    white-space: nowrap;
}

/* // 强行一行  超过... */
.toe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* // 首行缩进2em */
.ti2 {
    text-indent: 2em;
}

.cp {
    cursor: pointer;
}

.c888 {
    color: #888888;
}

.c086 {
    color: #0086F5;
    ;
}

.cf00 {
    color: #FF0000;
}

.ce74 {
    color: #E74D2C;
}

.c262 {
    color: #262A34;
}

.bgcfff {
    background: #FFFFFF;
}

.fz12 {
    font-size: 12px;
}

.fz14 {
    font-size: 14px;
}

.fz16 {
    font-size: 16px;
}

.fz18 {
    font-size: 18px;
}

.fz20 {
    font-size: 20px;
}

.fz22 {
    font-size: 22px;
}

.fz24 {
    font-size: 24px;
}

.fz26 {
    font-size: 26px;
}

.fz28 {
    font-size: 28px;
}

.fz30 {
    font-size: 30px;
}

.w100 {
    width: 100%;
}

.h100 {
    height: 100%;
}

.overhide {
    overflow: hidden !important;
}

.overauto {
    overflow: auto !important;
}

.zi999 {
    z-index: 999;
}

/* // 查看模式 */
.readonly {
    user-select: none;
    pointer-events: none;
    filter: grayscale(1);
}

html,
body {
    background: transparent;
    height: auto;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.disb {
    display: inline-block;
}

// 块元素溢出省略（单行）
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 溢出换行
.switchline {
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}

.pointer {
    cursor: pointer;
}

// flex 布局相关 通用原子类
.flex {
    display: flex;
}

.flex1 {
    flex: 1;
}

.flex-nowrap {
    /* 子元素不换行排列 */
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.flex-wa {
    /* 子元素换行排列 */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-center {
    // 横向居中
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.flex-dcenter {
    // 纵向居中
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.flex-rst {
    /* 横向 flex-start */
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
}

.flex-cst {
    /* 纵向 flex-start */
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
}

.flex-sba {
    /* 横向 子元素两边排列 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.flex-saa {
    /* 横向 子元素居中 1:2 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

.flex-dsba {
    /* 纵向 子元素两边排列 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.flex-dsaa {
    /* 纵向 子元素居中 1:2 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
}


.mr-8 {
    margin-right: 8px;
}

.ml-8 {
    margin-left: 8px;
}
.mb-8 {
    margin-bottom: 8px;
}

.mr-16 {
    margin-right: 16px;
}
.mb-16 {
    margin-bottom: 16px;
}
.site-add-edit {
    height: 100%;
    background: #fff;
    border-radius: 3px;
    padding: 24px;
    overflow: hidden;
    position: relative;

    .site-bottom {
        position: absolute;
        height: 70px;
        bottom: 0;
        left: 0;
        right: 24px;
        background-color: #fff;
        z-index: 1000;

        // width: 100%;
        .site-right-bottom {
            padding-top: 20px;
            height: 40px;
            text-align: right;

            .mr-8 {
                margin-right: 8px;
            }
        }
    }

}

.mb16 {
    margin-bottom: 16px;
}

// .form_box {
//     height: calc(100% - 70px);
//     margin-bottom: 20px;
//     overflow: auto;
// }
.site-tabs {
    height: calc(100% - 50px);
    margin-bottom: 70px;
    overflow: auto;
}